<template>
    <div style="position: relative;">

      <div 
        class="dyamic-page-tags" 
        :class="{
          'dyamic-page-tags-show': showDyamicTags, 
          'dyamic-page-tags-expanded': isExpanded
        }" 
        @click="toggleExpand"
        v-if="Tag_info"
      >
        <!-- 收回时只显示小图标或简短文本 -->
        <span v-if="!isExpanded" class="icon">+</span> <!-- 简单图标或文本 -->
        <!-- 展开时显示完整内容 -->
        <span v-else>
          <div class="title">
          {{ Tag_info.title }}
        </div>
        <div class="content">
          <div v-for="item in Tag_info.content_map" style="margin-top: 5px;">
            {{ item.label }}:{{ Tag_info.content_value[item.key] }}
          </div>
        </div>
        </span> <!-- 完整内容 -->
      </div>

    <common_card v-if="cardOptions" :cardOptions="cardOptions" :params="search_parmas"></common_card>
    <common_echarts v-if="chartOptions" :chartOptions="chartOptions" :params="search_parmas"></common_echarts>
    
    

     <el-row type="flex" style="flex-direction: column; width: 100%;height: calc(100vh - 65px);">

      <el-row class="main-table" style="width: 100%; height: 100%;  flex-direction: column; padding:10px 10px 10px 20px; overflow: scroll;"  type="flex">
        <el-row :span="24" >
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 14px; line-height: 20px; height: 35px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ topSecondTitle }}</el-breadcrumb-item>
          </el-breadcrumb> -->
          <!-- 搜索筛选 -->
          <cSearch :key="searchKey" v-if="!userShow && !echartsShow" :search_props="searchConfig" ref="query" @dialogEvent="dialogEvent"
            @searchEvent="searchEvent"  @apiEvent="apiEvent"></cSearch>
        </el-row>
        <cUser v-if="userShow" @selectMenu="selectMenu" :data="menuConfig"></cUser>
        <cTable v-if="!userShow && !echartsShow" :tableColumn="viewConfig" :tableData="tableData"
          @dialogEvent="dialogEvent" :paginate="paginate" @searchEvent="searchEvent" ref="table" />
      </el-row>
      <!-- header-top -->
    </el-row>

    <!-- dialog -->
    <el-dialog :title="dialog.label" :visible.sync="editFormVisible" :width="dialog.width ? dialog.width : '30%'"
      @click="closeDialog" v-if="editFormVisible">
      <el-form label-width="120px" :model="formModel" :rules="rules" ref="formModel" v-if="!dialog.ifNewTable">
        <el-form-item :label="item.label" :prop="item.key" v-for="(item, index) in dialog.dialogConfig" :key="index"
          v-show="item.showVerfiy ? showVerfiy(item) : item.isShow">


          <template v-if="item.type == 'select' && item.multiple == true">
            <el-select v-model="formModel[item.key]" :placeholder="'请选择' + item.label" multiple filterable
              default-first-option @change="change(item)">
              <el-option :label="optionItem.name" :value="optionItem.value" v-for="(optionItem, index) in item.data"
                :key="index">

              </el-option>
            </el-select>
          </template>

          <template v-else-if="item.type == 'select'">
            <el-select :placeholder="'请选择' + item.label" v-model="formModel[item.key]" @change="change(item)" :disabled="item.disabled?item.disabled:false">
              <el-option :label="optionItem.name" :value="optionItem.value" v-for="(optionItem, index) in item.data"
                :key="index">
                <!-- {{ optionItem }} -->
              </el-option>
            </el-select>
          </template>


           <template v-else-if="item.type == 'cascader'">
          <el-cascader
            v-model="formModel[item.key]"
            :options="options"
            :props="item.props"
            @change="change(item)">
            </el-cascader>

            </template>


          <template v-else-if="item.type == 'number'">
            <el-input size="small" v-model="formModel[item.key]" auto-complete="off" :placeholder="'请输入' + item.label"
            :min="item.min?item.min:0"
              @input="change(item)" type="number" :disabled="item.disabled?item.disabled:false"></el-input>
          </template>

          <template v-else-if="item.type == 'date'">
            <el-date-picker v-model="formModel[item.key]" :type="item.datetype ? item.datetype : 'datetime'" placeholder="选择日期时间" align="right"
              :picker-options="pickerOptions" default-time="12:00:00" value-format="timestamp"> </el-date-picker>
          </template>

          <template v-else-if="item.type == 'image'">
            <el-upload v-if="item.isShow" list-type="picture-card" :action="calc_url(item.url.api)"
              :on-success="(response, uploadFile, uploadFiles) => successUpLoad(response, item)"
              :before-remove="file => removeFile(file, item)" :on-preview="handlePictureCardPreview" :limit="item.max"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="75%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </template>
          <template v-else-if="item.type == 'ossVideo'">
            <cOss @ossUpLoadSuccess="ossUpLoadSuccess"></cOss>
          </template>

          <template v-else-if="item.type == 'textarea'">
            <el-input :disabled="item.disabled?item.disabled:false" :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label" :autosize="item.autosize?item.autosize:{ minRows: 2, maxRows: 4}" type="textarea"  v-model="formModel[item.key]" :maxlength="item.max?item.max:30" show-word-limit @input="change(item)"
            >
            </el-input>
          </template>

          <el-input size="small"  v-model="formModel[item.key]" auto-complete="off" :placeholder="'请输入' + item.label"
            @input="change(item)" :disabled="item.disabled?item.disabled:false" v-else></el-input>
        </el-form-item>
      </el-form>


      <!-- dialogTable -->
      <!-- 目前这个里面的dialog只是构想部分，可以改成tabs更好,这个版本的触发条件是dialog.ifNewTable为True,最好还是改成tabs的样子更好点 -->
      <cTable v-if="dialog.ifNewTable" :tableColumn="dialog.dialogConfig.tableColumn" :tableData="myDialogTableData"
          @dialogEvent="dialogEvent" tableHeight="65vh" :use_paginate="dialog.use_paginate" @searchEvent="searchEvent" ref="table_dialog" />

      <div slot="footer" class="dialog-footer" v-if="!dialog.ifNewTable">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>


    <!-- 动态组件dialog -->

    <el-dialog :visible.sync="component_dialog.isShow" v-if="component_dialog.isShow" :width="component_dialog.width" top="5vh" :title="component_dialog.title">
    <component v-if="component_dialog.AsyncComponent" :is="component_dialog.AsyncComponent" v-bind="component_dialog.dynamicProps" />
    </el-dialog>

    </div>
</template>

<script>
// 导入公有组件
import cMenu from '@/components/Menu'
import cTable from '@/components/Table'
import cSearch from '@/components/Search'

import cUser from '@/components/User/userIndex.vue'
import cOss from '@/components/OSS'

// 系统管理员权限
import sysConfig from '@/systemConfig/viewConfig/sysConfig'
import sysMenu from '@/systemConfig/sysMenuConfig'


import cloneDeep from 'lodash/cloneDeep';

import common_echarts from '../CustomComponents/common_echarts.vue'
import common_card from '@/components/Card/Card.vue'
import compete_dialog from '@/components/CustomComponents/compete_dialog.vue'

export default {
  name: 'vLogin',
  // 注册组件

  components: {
    cMenu,
    cTable,
    cSearch,
    cUser,
    cOss,
    compete_dialog,
    common_echarts,
    common_card
  },
  // 数据
  data() {
    return {

      // 此dialog 专门用来显示当表格操作需要展示详情或者特别的页面时 用户的自定义组件, 需要在config.js 中指定对应的component 组件的位置
      component_dialog: {
        isShow:false,
        AsyncComponent: null,     // 异步加载后的组件实例
        dynamicProps: {},
        echartsShow:false,
        width:'90%'
      },

      options: [],
      rules: {},

      // select query_params
      search_parmas:{},

      editFormVisible: false,
      viewConfig: {},
      tableData: [],
      myDialogTableData: [],
      topSecondTitle: '大屏展示',
      searchConfig: {},
      menuConfig: {},
      Config: {},
      paginate: {},
      userShow: true,
      ossUpload: true,
      initTagInfo:true, // 第一次加载Tag info 会显示taginfo, 是第一次加载的标准
      submitUrl: '',
      currentMenu: null,
      dialogImageUrl: '',
      dialogVisible: false,
      userInfo: {},
      chartOptions: null,
      cardOptions: null,
      showDyamicTags: false,   // 控制标签是否显示
      isExpanded: false,      // 控制标签是否展开
      formModel: {
        // name: '',
        // permission: ''
      },
      dialog: {
        label: '',
        dialogConfig: []
      }
    }
  },
  beforeMount() {
    // this.formModel =
  },

  // 方法
  methods: {

    toggleExpand() {
    this.isExpanded = !this.isExpanded; // 切换展开状态
    },
    // 根据需要也可以用定时器或其他事件触发标签的显示
    showTag() {
      this.showDyamicTags = true;
    },
    hideTag() {
      this.showDyamicTags = false;
    },

    handleRefresh(newQueryData) {
      console.log("newQueryDatanewQueryDatanewQueryData=>", newQueryData)
      this.init(this.init_item, newQueryData)
    },

    calc_url(url){
      return process.env.NODE_ENV === 'development' ?'/api' + url: url
    },
    removeFile(file, item) {
      this.formModel[item.key] = this.formModel[item.key].replace(file.response + ',', '')
      this.formModel[item.key] = this.formModel[item.key].replace(file.response, '')
    },

    // 2024.5 新增 显示表单显示验证
    showVerfiy(item) {
      if (item.showVerfiy.func) {
        // 函数验证
        return item.showVerfiy.func()
      }
      else {
        return false
        //pass
      }
    },


    apiEvent(item){
      let { method, api } = item.url
      let params = ''
      let relPath = ''
      const formModel = {}
      if(item.use_filter){
        params = this.get_filter_params(item.ignore_filter?item.ignore_filter:[])
      }
      if(item.use_page){
        let currentPage = type ? this.$refs.table.currentPage : 1
            console.log('this.$refs.table.currentPage', this.$refs.table.currentPage)
            let pageSize = this.$refs.table.pageSize
            relPath = '/' + currentPage + '/' + pageSize
      }
      if(item.use_select_item){
        console.log('item.use_select_item', item.use_select_item)
        if (this.$refs.table.multipleSelection.length == 0){
          this.$message({
            message: '请先选择数据',
            type: 'warning'
          })

          return
        }
        else {
          if(item.use_select_item.map){
            let select_list = []
            for (const row of this.$refs.table.multipleSelection) {
              let row_info = {}
              for (const element of item.use_select_item.map.value) {
                row_info[element] = row[element]
              }
              select_list.push(row_info)
            }
            formModel[item.use_select_item.map.key] = select_list
          }
        }
      }

      if(item.download){
        this.$downloadFile(method, api + relPath + params).then(res => {
          if(item.refrush_table){
            // 如果要求刷新则根据当前页面查询条件进行页面数据的刷新
            this.searchEvent(this.$refs.table.currentPage)
          }
          return
        })
      }
      else {
        this.$confirm('确认' + item.label + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$http(method, api + relPath + params, formModel?formModel:{}).then(res => {
          if(item.open){ 
            window.open(res,'_blank')
          }
          else if(item.refrush_table){
            // 如果要求刷新则根据当前页面查询条件进行页面数据的刷新
            this.searchEvent(this.$refs.table.currentPage)
          }
        })
      })
    }


    },

    successUpLoad(res, item) {
      console.log('this.formModel', this.formModel)
      if (!this.formModel[item.key] || this.formModel[item.key].length == 0) this.formModel[item.key] = ''
      if (res) {
        // 以下做法仅适用于当max 为1 的情况
        // if(this.formModel[item.key].split(',').length < item.max){
        //   this.formModel[item.key] = (this.formModel[item.key] ? this.formModel[item.key] + ',' : '') + res
        // }
        // else{
        //   this.formModel[item.key].split(',').pop()
        //   this.formModel[item.key] = (this.formModel[item.key] ? this.formModel[item.key] + ',' : '') + res
        // }
        this.formModel[item.key] = res
      }
      console.log('this.formModel', this.formModel)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    init(item, query_data={}) {

        // 避免污染全局的item 即 init_item
        item = cloneDeep(item)
      if (!item) item = this.Config.view[0]
      
      else {
        this.currentMenu = item
      }
      this.topSecondTitle = item.name
      this.viewConfig = item.data.tableColumn
      this.chartOptions = item.data.chartOptions
      this.cardOptions = item.data.cardOptions

      if(item.data.TagConfig){
        this.Tag_info = item.data.TagConfig
        if(this.Tag_info.url){
          this.$http(this.Tag_info.url.method, this.Tag_info.url.api).then(res => {
                this.Tag_info.content_value = res.data

                if(this.initTagInfo){
                  this.showDyamicTags = true
                  this.isExpanded = true
                  this.initTagInfo = false
                }
              })
        }
      }


      // 提前获取select 需要的配置项
      for (const iterator of this.viewConfig.column) {
        if(iterator.type == 'select' && iterator.url && !iterator.data){
          this.$http(iterator.url.method, iterator.url.api).then(res => {
                let data = []
                for (const r of res.data) {
                  data.push({ value: r[iterator.url.map['name']], name: r[iterator.url.map['value']] })
                }
                this.$set(iterator, iterator.data, data)
                iterator.data = data
              })
        }
      }

      // 跳转到其他页面传入的查询参数
      if(query_data){
        for (const key in query_data) {
          if (Object.prototype.hasOwnProperty.call(query_data, key)) {

            let value = query_data[key];

            for (const element of item.data.TopConfig.data) {
              if(element.key == key){
                element.query = value
                break
              }
              if(element.type == "input-group"){
                let res = element.value.find(item=>item.key == key)
                if(res){
                  res.query = value
                  break
                }
              }
            }
          }
        }
      }


      this.searchConfig = item.data.TopConfig
      this.searchKey = Date.now()
      this.searchBtn = this.searchConfig.btn.filter(item => item.type == 'search')[0]
      let repath = item.data.url.api + '/1/' + item.data.url.pageSize
      
      if (item.data.url.restful) {
        repath += '/' + item.data.url.restful[0].value
      }

    
      let search_parmas = "?"

      // 这是查询固定参数, 即写在data.url 里面的固定参数
      if(item.data.url.params){
        for (const element of item.data.url.params) {
          search_parmas += `${element.key}=${element.value}&`
        }
      }

      for (const key in query_data) {
        if (Object.prototype.hasOwnProperty.call(query_data, key)) {
          search_parmas += `${key}=${query_data[key]}&`;
        }
      }

      this.search_parmas = search_parmas
      repath += search_parmas

      this.$http(item.data.url.method, repath).then(res => {
        this.tableData = res.data
        
        this.paginate = res.paginate

        if(this.chartOptions?.url == "use_table_data"){
          this.chartOptions.xAxis = res.echarts_data.xAxis
          this.chartOptions.yAxis = res.echarts_data.yAxis
          this.chartOptions.series = res.echarts_data.series
        }
      })
    },
    // selectMenu(t, sysMenu, query_data) {
    //   if(query_data){
    //     this.query_data = query_data
    //   }
    //   if (t == false && sysMenu == 'user') {
    //     this.userShow = true
    //     this.topSecondTitle = '数据分析'
    //   } else {
    //     this.userShow = false
    //   }
    //   for (const iterator of this.Config.view) {
    //     if (iterator.tableName == t.tableName) {
    //       this.init(iterator, query_data=query_data)
    //       break
    //     }
    //   }
    // },

    // 阿里云Oss 上传成功
    ossUpLoadSuccess(res) {
      this.ossUpload = true
      this.formModel["movieInfo"] = {
        requestUrl: res.res.requestUrls[0],
        fileName: res.name
      }
      console.log(this.formModel)
    },


    get_filter_params(ignore_filter=[]){
      // 获取查询参数, 注意不带分页条件, 理论上所有的分页都以/page/pageSize 来传递

      let queryData = {}
      let queryDataCopy = this.$refs.query.queryData

      let searchConfigDataCopy = []

      this.searchConfig.data.forEach(element => {
        if (element.key){
          searchConfigDataCopy.push(element)
        }
        else if(element.type=='input-group') searchConfigDataCopy.push(...element.value)
      });
      
      for (const key in queryDataCopy) {
        for (const iterator of searchConfigDataCopy) {
          
          if (key == iterator.key && queryDataCopy[key] !== iterator['default'] && queryDataCopy[key]!=='') {
            queryData[key] = queryDataCopy[key]
          }
        }
      }

      let params = '?'
      for (const key in queryData) {
        if(ignore_filter.includes(key)){
          continue
        }
        params += `${key}=${queryData[key]}&`
      }
      console.log(`this.currentMenu=>${this.currentMenu}`)
      if(!this.currentMenu){
        this.currentMenu = this.Config.view[0]
      }
      // 查询固定参数，即使没有任何查询条件此固定参数依然生效
      if(this.currentMenu.data.url.params){
        let search_parmas = ""
        for (const element of this.currentMenu.data.url.params) {
          search_parmas += `${element.key}=${element.value}&`
        }
        params += search_parmas
      }
      
      console.log("paramsparamsparams", params);
      return params
    },

    searchEvent(type) {
      let { method, api } = this.searchBtn.url
      let currentPage = type ? this.$refs.table.currentPage : 1
      console.log('this.$refs.table.currentPage', this.$refs.table.currentPage)
      let pageSize = this.$refs.table.pageSize
      let relPath = '/' + currentPage + '/' + pageSize

    
      
      let params = this.get_filter_params()
      this.search_parmas = params

      this.$http(method, api + relPath + params).then(res => {
        // console.log(res.data)
        this.tableData = res.data
        this.paginate = res.paginate
        if(this.chartOptions?.url == "use_table_data"){
          this.chartOptions.xAxis = res.echarts_data.xAxis
          this.chartOptions.yAxis = res.echarts_data.yAxis
          this.chartOptions.series = res.echarts_data.series
        }
      })
    },
    change(item) {
      if(item["foreign_show"]){
        for (const element of item["foreign_show"]) {

          console.log("element==>", this.dialog.dialogConfig)
          let target_key = element["target_key"]
          let params = []
         for (const t of  element['params_keys']) {
            params.push(this.formModel[t])
         }

         
         let result = this.dialog.dialogConfig.find(item => item.key === target_key);
          if (element['check'](...params)){
              result.isShow = true
              // 这里动态设置required失效了, 应该是渲染的问题
              result.required = element['required']?element['required']:false
          }
          else {
              result.isShow = false
              result.required = false
          }

        }
      }
      if(item["foreign_default_value"]){
        for (const element of item["foreign_default_value"]) {
          let target_key = element["target_key"]
          let params = []
         for (const t of  element['params_keys']) {
            params.push(this.formModel[t])
         }

         let result = this.dialog.dialogConfig.find(item => item.key === target_key);
          if (element['check'](...params)){
              result.type = element['type']
              this.formModel[target_key] = element['value']
          }
        }
      }
      // this.$forceUpdate()
    },
    submitForm() {

      // 判断Oss上传成功
      if (this.ossUpload != true) {
        this.$message.warning("请等待视频上传完成")
        return false
      }

      let { method, api, path } = this.submitUrl
      console.log("this.submitUrl", this.submitUrl)
      let relPath = ''
      if (path)
        for (const iterator of path) {
          if (this.formModel[iterator.key] != undefined && this.formModel[iterator.key] != null) relPath += '/' + this.formModel[iterator.key]
        }

      // 验证表单 2024.5.20  新增

      this.$refs["formModel"].validate((valid) => {
        if (valid) {

          this.$http(method, api + relPath, this.formModel).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg)
              this.editFormVisible = false
              this.init(this.currentMenu)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    // 处理diolog的核心
    async dialogEvent(type, item, row) {
       if(item.use_select_item){
        if (this.$refs.table.multipleSelection.length == 0){
          this.$message({
            message: '请先选择数据',
            type: 'warning'
          })
          return
        }
      }

      if (item.ifComponent) {
        try {
          const comp = await item.component_dialog.component; // 等待 import() 加载完成
          this.component_dialog.AsyncComponent = comp.default;    // Vue 组件在 default 上
          this.component_dialog.dynamicProps = {props_data: item.component_dialog.props || row};
          this.component_dialog.isShow = true;
          this.component_dialog.title = item.component_dialog.title
          this.component_dialog.width = item.component_dialog.width
        } catch (err) {
          console.error("加载组件失败", err);
        }
      }



      else if (!item.ifDialog) { // 如果是按钮类型的小弹框, 直接走按钮处理时间
        return this.btnEvent(type, item, row)
      } else {  // 如果是表单类型的大弹框

        // 深拷贝dialog的配置, 以免在填写过程中的动态条件导致dialog的输入框变化
        this.dialog = cloneDeep(item);
        if (this.dialog.ifNewTable) {
          let { method, api, path } = item.url
          let relPath = ''
          if (path)
            for (const iterator of path) {
              if (row[iterator.key] != undefined) relPath += '/' + row[iterator.key]
            }
          this.$http(method, api + relPath, row).then(res => {
            if (res.code == 200) {
              // this.init(this.currentMenu)
              if (!this.dialog.ifNewTable) {
                this.$message.success(res.msg)
              }
              this.myDialogTableData = res.data
            }
          })
          // 提前获取select 需要的配置项
          const selectRequests = this.dialog.dialogConfig.tableColumn.column
          .filter(iterator => iterator.type == 'select' && iterator.url && !iterator.data)
          .map(iterator => {
            return this.$http(iterator.url.method, iterator.url.api).then(res => {
              let data = [];
              for (const r of res.data) {
                data.push({ value: r[iterator.url.map['name']], name: r[iterator.url.map['value']] });
              }
              this.$set(iterator, iterator.data, data);
              iterator.data = data;
            });
          });
          Promise.all(selectRequests)
          .then(() => {
            this.editFormVisible = true; // 所有请求完成后再显示表单
          })
          .catch(error => {
            // 处理请求错误
            console.error('请求失败:', error);
            this.$message.error('加载配置项失败，请稍后重试');
          });
        }
        else {

          // 检测是否有Oss上传, 有则开启上传成功监听
          let configDialogIteratorList = this.dialog.dialogConfig
          if (configDialogIteratorList.find(item => item.type == 'ossVideo')) this.ossUpload = false
          else this.ossUpload = true
          // 新增和修改都走这里
          this.formModel = {}
          this.rules = {}
          for (const iterator of this.dialog.dialogConfig) {
            if (type) this.$set(this.formModel, iterator.key, row[iterator.key]) // 修改
            else {
              this.$set(this.formModel, iterator.key, (iterator.default !== undefined && iterator.default !== '' && iterator.default !== NaN) ? iterator.default : '')
            } // 新增如果有默认值用默认值否则为空
            this.$set(this.rules, iterator.key, [{ required: iterator.required, message: '请输入' + iterator.label, trigger: 'blur' }])
          }
          console.log(this.rules)
          this.submitUrl = item.url
          for (const iterator of this.dialog.dialogConfig) {

            // 处理select的核心部分
            if (iterator.type == 'select' && iterator.url) {
              this.$http(iterator.url.method, iterator.url.api).then(res => {
                let data = []
                for (const r of res.data) {
                  data.push({ value: r[iterator.url.map['name']], name: r[iterator.url.map['value']] })
                }
                this.$set(iterator, iterator.data, data)
                iterator.data = data
              })
            }
          }

          if(item.use_select_item?.map){
            let select_list = []
            for (const row of this.$refs.table.multipleSelection) {
              let row_info = {}
              for (const element of item.use_select_item.map.value) {
                row_info[element] = row[element]
              }
              select_list.push(row_info)
            }
            this.formModel[item.use_select_item.map.key] = select_list
          }
          this.editFormVisible = true

          // this.$forceUpdate()
        }

      }
    },
    closeDialog() {
      this.editFormVisible = false
      this.dialog.ifNewTable = false
    },
    btnEvent(type, item, row) {
      console.log(type, item, row)
      this.$confirm('确认' + item.label + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let { method, api, path } = item.url

        let relPath = ''
        if (path)
          for (const iterator of path) {
            if (row[iterator.key] != undefined) relPath += '/' + row[iterator.key]
          }
        this.$http(method, api + relPath, row).then(res => {
          if (res.code == 200) {
            this.init(this.currentMenu)
            if (item.ifOpenNew) {
              const openWindowAsync = async () => {
                window.open( `${$devUrluser}/login-recog?signinfoID=${row.id}&userID=${localStorage.getItem("userID")}`);
              };
              // 调用异步函数
              openWindowAsync();
            }
            this.$message.success(res.msg)
          }
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        }
        )
    }
  },

  // 侦听器
  watch: {
  },
  props: {
    pageKey: String,
    init_item: Object,
    queryData: {
      type: Object,
      default: {}
     }
  },


  // 计算属性
  computed: {},

  // 创建后
  created() {
    this.menuConfig = sysMenu
    this.Config = sysConfig
    if(this.init_item){
        this.init(this.init_item, this.queryData)
        this.userShow = false
    }
    else {
    }
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
  },

  // 组件挂载后
  mounted() {
    console.log('this.viewConfig', this.viewConfig)
    this.$bus.$on(`refresh-page-${this.pageKey}`, this.handleRefresh)
  },

  // 组件销毁前
  
  beforeDestroy() {
  this.$bus.$off(`refresh-page-${this.pageKey}`, this.doRefresh)
}

}
</script>

<style>
.el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}
.el-upload--picture-card i {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%);
}
.el-upload--picture-card {
  position: relative !important;
}
</style>

<style lang="css" scoped>

.dyamic-page-tags {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
  width: 40px; /* 收回时显示的宽度 */
  padding: 5px; /* 收回时内边距 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15); /* 轻微的阴影 */
  border-left: 4px solid transparent; /* 左侧边框，用于不同类型的通知 */
  transition: all 0.3s ease; /* 动画效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%); /* 初始时，元素在屏幕外 */
  opacity: 0; /* 初始透明度 */
  border-left: 5px solid #409eff; /* 左侧边框用于提示颜色 */
}
.dyamic-page-tags .title{
  font-weight: bold;
  font-size: 18px;
  margin-left: -10px;
}
.dyamic-page-tags .content{
  margin-top: 10px;
  font-size: 16px;
}

.dyamic-page-tags-show {
  transform: translateX(0); /* 滑动进来 */
  opacity: 1; /* 显示时透明度为 1 */
}

.dyamic-page-tags-expanded {
  width: 180px; /* 展开状态宽度 */
  padding: 20px; /* 展开时内边距 */
}

.dyamic-page-tags:hover {
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

.dyamic-page-tags .icon {
  font-size: 28px; /* 可根据需要调整图标大小 */
  font-weight: bold;
  color: #409eff;
}

.Login {
  width: 100%;
  display: flex;
  height: 100vh;
}

.tac {
  width: 15%;
  height: 100%;
}
.main-table::-webkit-scrollbar {
  display: none;
}
</style>
